<template>
  <div id="app">
    <h3 v-color="color1">自定义指令值-color-skyblue</h3>
    <h3 v-color="color2">自定义指令值-color-orange</h3>
    <hr>
    <button @click="changeColor">点击修改颜色</button>
  </div>
</template>
<script>
// 需求：不同的指令值，显示不同的字体颜色，点击按钮修改，更新颜色
export default {
  name: 'App',
  data(){
    return {
      color1:'pink',
      color2:'orange'
    }
  },
  methods:{
    changeColor(){
      this.color1 = 'purple'
    }
  },
  directives:{
    color:{
      // 当指令所在的元素挂载到页面上时触发
      // eslint-disable-next-line
      inserted(el, {value}){
        // console.log(binding)
        el.style.color = value
      },
      // 当我们修改指令的值的时候，触发
      update(el, binding){
        el.style.color = binding.value
      }
    }
  }
}
</script>

